<template>
	<div id="TodoList">
		<BaseInputText class="form-control"
		  v-model="newTodoText"
		  placeholder="请输入文字"
		  @keydown.enter="addTodo"
		></BaseInputText>
		
		<ul class="list-group mt-3" v-if="todos.length">
			<TodoListItem
			  v-for="todo in todos"
			  :key="todo.id"
			  :todo="todo"
			  @remove="removeTodo"
			>
			</TodoListItem>
		</ul>
		<p v-else>
			现在还没有任务，在上面添加吧
		</p>
	</div>
</template>

<script>
	import BaseInputText from '@/components/BaseInputText'
	import TodoListItem from '@/components/TodoListItem'
	let nextTodoId =1
	export default {
		name:'TodoList',
		components:{
			BaseInputText,TodoListItem
		},
		data(){
			return{
				newTodoText:'',
				todos:[
					{
						id: nextTodoId++,
						text: '学习vue'
					},
					{
						id: nextTodoId++,
						text: '学习nodejs'
					},
					{
						id: nextTodoId++,
						text: '学习webpack'
					}
				]
			}
		},
		methods:{
			addTodo(){
				const trimmedText = this.newTodoText.trim()
				if(trimmedText){
					this.todos.push({
						id: nextTodoId++,
						text: trimmedText
					})
					this.newTodoText=''
				}
			},
			removeTodo (idToRemove){
				this.todos= this.todos.filter(todo => {
					return todo.id !== idToRemove
				})
			}
		},
		
	}
</script>

<style>
</style>
